<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示和隐藏</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="sh">显示/隐藏</button>

    <button id="down">下拉显示</button>
    <button id="up">上拉隐藏</button>
    <button id="du">上拉/上拉</button>

    <button id="in">淡入</button>
    <button id="out">淡出</button>
    <button id="io">淡入/淡出</button>

    <div class="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let box = $('.box')
        $('#show').click(function(){
            // box.show()
            //show()方法可以传参数，控制显示的速度：fast(快速) slow(慢速) normal(中速)
            //也可以传具体的数值，单位是毫秒
            box.show(1000)
        })
        $('#hide').click(function(){
            // box.hide()
            box.hide(1000)
        })
        $('#sh').click(function(){
            // toggle()方法，对show()和hide()方法，进行了整合
            box.toggle(1000)
        })

        $('#down').click(function(){
            box.slideDown(1000)
        })
        $('#up').click(function(){
            box.slideDown(1000)
        })
        $('#du').click(function(){
            //slideToggle() 对slideDown()和slideDown()方法进行整合
            box.slideToggle(1000)
        })

        $('#in').click(function(){
            //显示和隐藏动作完毕后，可以通过传回调执行后面的操作。
            box.fadeIn(1000,function(){
                alert('显示')
            })
        })
        $('#out').click(function(){
            box.fadeOut(1000,function(){
                alert('隐藏')
            })
        })
        $('#io').click(function(){
            //fadeToggle()方法，对fadeIn和fadeOut方法进行了整合
            box.fadeToggle(1000)
        })
    </script>
</body>
</html>